import React from 'react';
import { connect } from 'umi';
import { Alert, Button, Form, Input, Radio, Divider, Avatar, PageHeader, Statistic, Card, Tag, Modal } from 'antd';
import {LockOutlined, LoginOutlined, PlusOutlined, ReloadOutlined, UserOutlined} from '@ant-design/icons';
import style from './index.less';
import moment from 'moment';
import { API } from '../../../config/requestConfig';
import ProductTypeTable from './productTypeTable';
import ReactEcharts from 'echarts-for-react';
import UserTable from '../adminHome/userTable';
import NewProductTypeModal from "./newProductTypeModal";
import {delay} from "../../../utils/myUtils";


class ProductType extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      modalVisible: false,
    }
  }

  // handler
    showModal = () => {
        this.props.dispatch({type: 'commonModel/getAllMachineInfo'});
        this.props.dispatch({type: 'commonModel/getCityList'});
        this.setState({modalVisible: true});
    };

    hideModal = () => {
        this.setState({modalVisible: false});
    };


  // life cycle
  initData = async () => {
    await this.setState({loading: true});
  await this.props.dispatch({type: 'commonModel/getAllMachineInfo'});
  await delay(400);
    await this.setState({loading: false});
  };

  componentWillMount() {
    this.initData().then(()=>null)
  }

  render() {

    return (
      <div>
        <PageHeader title="商品类型管理中心"
                    subTitle="管理员可管理平台下所有商品"
                    extra={[
                      <Button loading={this.state.loading} onClick={this.initData} icon={<ReloadOutlined/>}
                              type="primary">刷新</Button>,
                      <Button onClick={this.showModal} icon={<PlusOutlined/>} type="primary">发布商品</Button>
                    ]}
        />

        <Divider orientation='left' style={{fontWeight: 'bold'}}>平台全部商品：{this.props.machineInfo?.length}个</Divider>
        <ProductTypeTable dataSource={this.props.machineInfo}
                      dispatch={this.props.dispatch}
        />
        <NewProductTypeModal visible={this.state.modalVisible} hide={this.hideModal}/>
      </div>
    )
  }


}

function mapStateToProps({ loginModel, adminModel,commonModel  }) {
  const { isLogin, username, user_role, last_login } = loginModel;
  const { machineInfo } = commonModel;
  return { isLogin, username, user_role, last_login, machineInfo };
}

export default connect(mapStateToProps)(ProductType);
